<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">

        #box {
            width: 406px; height: 635px;
            cursor: move;
            position: absolute;
            background-color: #FFF;
        }
        body {
            background-color: #F3F3F3;
        }

    </style>
</head>
<body>
<div id="box">
</div>
<script>
    // lyu 测试 20190301

    $(function () {
        var $box = $("#box");
        function Move(){
            this.box = $("#box");
            this.posix =  Object.create(null); // 初始位置
            this.isMoveing = false; // 移动标识
        }
        Move.prototype = {
            init: function () {
                var me = this;
                me.box.mousedown(function (e) {
                    var offset = $(this).offset();
                    me.posix = {'x': e.pageX - offset.left, 'y': e.pageY - offset.top};
                    me.isMoving = true;
                });
                $(document).mousemove(function (e) {
                    if (me.isMoving) {
                        me.box.css({
                            'top': e.pageY - me.posix.y,
                            'left': e.pageX - me.posix.x
                        });
                    }
                }).mouseup(function (e) {
                    if (me.isMoving) {
                        me.isMoving = false;
                    }
                });
            }
        }
        var objMove = new Move();
        objMove.init();

    });
</script>
</body>
</html>
